import React, { useState } from 'react'
import { Badge, TabBar } from 'antd-mobile'
import { Outlet, useNavigate } from 'react-router-dom'

import {
  AppOutline,
  MessageOutline,
  UserOutline,
} from 'antd-mobile-icons'

export default function Zhu() {
  const data = JSON.parse(localStorage.getItem("user"))[0];
  const zhiye=data.zhiye
  const tabs = [
    {
      key: 'home',
      title: '首页',
      icon: <AppOutline />,
      rou:"/zhu/shou"
    },
    {
      key: 'message',
      title: '消息',
      icon: <MessageOutline />,
      rou:zhiye=="经理"?"/zhu/xiaoxi":"/liaotian"
    },
    {
      key: 'personalCenter',
      title: '我的',
      icon: <UserOutline />,
      rou:"/zhu/wode"
    },
  ]
  const navigate=useNavigate()
  const tiaozhuan=(i)=>{
    navigate(i)
  }
  return (
    <div style={{ 
      display: 'flex', 
      flexDirection: 'column',
      height: '100vh',
      position: 'relative'
    }}>
      <div style={{ 
        flex: 1,
        overflow: 'auto',
        paddingBottom: '50px' // 为底部 TabBar 留出空间
      }}>
        <Outlet />
      </div>
      <TabBar style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        borderTop: 'solid 1px #eee',
        background: '#fff'
      }}>
        {tabs.map(item => (
          <TabBar.Item 
            key={item.key} 
            icon={item.icon} 
            title={item.title}
            onClick={()=>{tiaozhuan(item.rou)}}
          />
        ))}
      </TabBar>
    </div>
  )
}
